<template>
  <div class="w">
    <el-carousel height="600px">
      <el-carousel-item v-for="(item, index) in list_img" :key="index">
        <h3 class="small">
          <img :src="item.url" alt />
        </h3>
      </el-carousel-item>
    </el-carousel>

    <div v-for="item in slotList" :key="item.id" class="item1">
      <div>
        <img :src="item.image" alt="" />
      </div>

      <ul>
        <li>
          <h1>
            <a href="https://gz.fang.anjuke.com/loupan/481245.html">{{
              item.title
            }}</a>
          </h1>
        </li>
        <li>
          <i class="el-icon-location-information"></i>&nbsp;<span
            >[{{ item.address }}]</span
          >&nbsp;荷花路3号
        </li>
        <li>
          <i class="el-icon-wallet"></i>&nbsp;户型：三室一厅|<span
            >&nbsp;<i class="el-icon-full-screen"></i
            >&nbsp;建筑面积：67-87平方</span
          >
        </li>
        <li><span>在售</span> <span>住宅</span><span>30号开抢</span></li>
        <li>
          <span v-for="(item1, value) in item.tags" :key="value">{{
            item1
          }}</span>
        </li>
      </ul>
      <ol>
        <li><strong>36000</strong><b>元/m²起</b></li>
        <li>参考总价：260.8万元起</li>
      </ol>
    </div>
  </div>
</template>



<script>
import { getPropertyList } from "@/api";
export default {
  name: "MyAbout",
  data() {
    return {
      list_img: [
        { url: require("./images/a56e6226-5d00-42da-9f22-35f684ed9ba5.jpg") },
        {
          url: require("./images/krakenimages-376KN_ISplE-unsplash.jpg"),
        },
        {
          url: require("./images/src=http___dpic.tiankong.com_lr_u3_QJ7103321778.jpg&refer=http___dpic.tiankong.webp"),
        },
        {
          url: require("./images/275a960e791367109c5e301af9488859.jpeg"),
        },
      ],
      slotList: [],
    };
  },
  async mounted() {
    const res = await getPropertyList();
    this.slotList = res.data;
    console.log(this.slotList);
  },
};
</script>

<style lang="less" scoped>
.w {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.small img {
  width: 100%;
  height: 600px;
}

.item1 {
  flex-direction: row;
  display: flex;
  justify-content: flex-start;
  margin-left: 20px;
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
  cursor: pointer;
}

.item1 ul {
  flex: 1;
  margin-left: 20px;
  margin-top: 30px;
  margin-right: 200px;
}
.item1 ul li {
  margin: 20px 0;
  font-size: 15px;
  a {
    text-decoration: none;
    color: black;
    font-size: 25px;
    font-weight: 700;
  }
  a:hover {
    color: orange;
  }
}

.item1 ul li:nth-child(4) span {
  background: #f32727;
  font-size: 12px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 2px;
  color: #fff;
  margin: 5px;
}
.item1 ul li:nth-child(5) span {
  color: #849aae;
  background: #e5e5e5;
  font-size: 12px;
  padding: 8px;
  display: inline-block;
  margin: 0 10px 0 0;
}

.item1 img {
  flex: 1;
  transition: all 0.6s;
  width: 280px;
  height: 300px;
}
.item1 div:hover img {
  transform: scale(1.1);
}

.item1 ol {
  flex: 1;
  margin: 100px 50px 0 50px;
  li:nth-child(1) {
    text-align: right;
    padding: 5px 0;
    line-height: 14px;
    margin: 5px 0 0 0px;
    font-size: 14px;
    font-family: "微软雅黑";
    strong {
      font-size: 28px;
      color: #f32727;
    }
    b {
      font-size: 16px;
      color: #f32727;
    }
  }
  li:nth-child(2) {
    text-align: right;
    padding: 5px 0;
    line-height: 14px;
    margin: 5px 0 0 0px;
  }
}
</style>